<template>
	<view class="me">
		<view class="avatar">
			<image :src="avatar" mode="widthFix"></image>
		</view>
		<view class="username">
			欢迎您！{{username}}
		</view>
		<view class="logoutBtn">
			<button class="cu-btn bg-red margin-tb-sm lg" @tap="logoutUser">退出登录</button>
		</view>
		<view class="tag">
			个人学习项目，仅供参考
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['id', 'avatar', 'username']),
		data() {
			return {}
		},
		created() {
			//判断是否已经登录
			if (this.$store.state.id == '') {
				//跳转登录页面
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			//注销
			logoutUser() {
				this.$store.commit('logout')
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.me {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.avatar image {
		width: 200rpx;
		border-radius: 50%;
	}

	.logoutBtn {
		width: 70%;
	}

	.logoutBtn button {
		width: 100%;
	}

	.tag {
		position: absolute;
		bottom: 1px;
		color: #999;
	}
</style>
